<template>
    <div class="login-wrap" :class="{ 'night-mode': isNightMode }">
        <div class="bubbles">
            <div class="bubble" v-for="i in 15" :key="i"></div>
        </div>
        <div class="floating-shapes">
            <div class="shape circle"></div>
            <div class="shape square"></div>
            <div class="shape triangle"></div>
        </div>
        <div class="theme-toggle" @click="toggleTheme">
            <el-icon :size="24" :color="isNightMode ? '#fff' : '#000'">
                <component :is="isNightMode ? 'Sunny' : 'Moon'" />
            </el-icon>
        </div>
        <el-form :label-position="labelPosition" label-width="auto" :model="loginForm" class="login-container"
            :rules="rules" ref="ruleFormRef">
            <div class="center">
                NERV在线考试系统
            </div>
            <el-form-item label="" prop="username">
                <el-input v-model="loginForm.username" placeholder="请输入用户名" fixe-icon="user" clearable>
                    <template #prefix>
                        <el-icon class="input-icon">
                            <UserFilled />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
                <el-input v-model="loginForm.password" show-password type="password" placeholder="请输入密码" clearable>
                    <template #prefix>
                        <el-icon class="input-icon">
                            <Lock />
                        </el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="" prop="verifyCode">
                <el-input v-model="loginForm.verifyCode" placeholder="请输入验证码" clearable style="width: 70%;" />
                <div class="code-img">
                    <VerifyCode ref="verifyCodeRef" @update:key="handleVerifyCodeKeyUpdate"/>
                </div>
            </el-form-item>
            <div class="form-actions">
                <div class="user-options">
                    <!-- <div class="left-option">
                        <el-checkbox v-model="remember" class="remember" label="记住密码" @change="rememberStatus" size="large" />
                    </div> -->
                    <div class="left-option">
                        <span class="reset-password-link" @click="openResetPasswordDialog">重置密码</span>
                    </div>
                    <div class="right-option">
                        <router-link class="link-div" :to="{ path: '/register' }">用户注册</router-link>
                    </div>
                </div>
                <div class="button-group">
                    <el-button type="primary" native-type="reset" class="reset-btn">重置</el-button>
                    <el-button type="success" native-type="submit" class="login-btn"
                        @click.prevent="submitForm(ruleFormRef)">登录</el-button>
                </div>
            </div>
        </el-form>

        <!-- 重置密码对话框 -->
        <el-dialog v-model="resetPasswordVisible" title="重置密码" width="30%" center align-center>
            <el-form :model="resetPasswordForm" :rules="resetPasswordRules" ref="resetPasswordFormRef" label-position="top">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="resetPasswordForm.username" placeholder="请输入用户名">
                        <template #prefix>
                            <el-icon class="input-icon"><UserFilled /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="学号" prop="school_number">
                    <el-input v-model="resetPasswordForm.school_number" placeholder="请输入学号">
                        <template #prefix>
                            <el-icon class="input-icon"><School /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="password">
                    <el-input v-model="resetPasswordForm.password" show-password type="password" placeholder="请输入新密码">
                        <template #prefix>
                            <el-icon class="input-icon"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="resetPasswordForm.confirmPassword" show-password type="password" placeholder="请再次输入新密码">
                        <template #prefix>
                            <el-icon class="input-icon"><Lock /></el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="verifyCode">
                    <el-input v-model="resetPasswordForm.verifyCode" placeholder="请输入验证码" clearable style="width: 70%;" />
                    <div class="code-img">
                        <VerifyCode ref="resetVerifyCodeRef" @update:key="handleResetVerifyCodeKeyUpdate"/>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="resetPasswordVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitResetPassword(resetPasswordFormRef)">确 定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { UserFilled, Lock, Moon, Sunny, School } from '@element-plus/icons-vue';
import request from '@/utils/request';
import { useUser } from '@/stores/userInfo.js';
import JSEncrypt from 'jsencrypt';
import VerifyCode from '@/components/VerifyCode.vue';
import { useRouter } from 'vue-router';
import { useTheme } from '@/stores/themeStore';

// RSA加密函数
const encryptPassword = (password) => {
    const encrypt = new JSEncrypt();
    const publicKey = 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA7rYgHiByM6LUO1Z7ZD80OKWl1O16/c+D1zRrrP5rYq/YSG+ZuP7Bjx3tcOgFmKL97ifyAbdNn9RmvyqBRqMt8YlT9vYXYQ8MirWbnBulhC9Q9j2ab/sUIDd1qdDIuAxx5i7X377M/IIrMTe1HTID646kwkKr/eUMZ1EEjX/Xnk2lJxj3sSzKuQ+LPMLrFQ1LP1jM6MNB4auDkrQ2vNEoI41gMy0PEE168nYrQWGkRdbolDX5GNDragi9my+Uv4J2hvf1GYDzDFs+FLK5ceUKFkkoGRHouqxkizxNAC2GlMGkJdKp2NXmvDdYvXl8VGutHPN2TnL2c875dRBEHb81zQIDAQAB';
    encrypt.setPublicKey(publicKey);
    return encrypt.encrypt(password);
};

const labelPosition = ref('top');
const router = useRouter();
const userStore = useUser();
const ruleFormRef = ref();
const remember = ref(false);
const verifyCodeRef = ref(null);
const resetVerifyCodeRef = ref(null);

const handleVerifyCodeKeyUpdate = (newKey) => {
    loginForm.verifyCodeKey = newKey;
};

const handleResetVerifyCodeKeyUpdate = (newKey) => {
    resetPasswordForm.verifyCodeKey = newKey;
};

const loginForm = reactive({
    username: '',
    password: '',
    verifyCode: '',
    verifyCodeKey: ''
});

const refreshVerifyCode = () => {
    if (verifyCodeRef.value) {
        verifyCodeRef.value.handleClick();
    }
};

const submitForm = async (formEl) => {
    if (!formEl) return;
    await formEl.validate(async (valid) => {
        if (valid) {
            try {
                const encryptedPassword = await encryptPassword(loginForm.password);
                const response = await request.post('/nerv/login', {
                    username: loginForm.username,
                    password: encryptedPassword,
                    verifyCodeKey: loginForm.verifyCodeKey,
                    verifyCode: loginForm.verifyCode
                });

                console.log('登录响应完整数据：', response);
                
                if (response.code === 200) {
                    ElMessage.success(response.message || '登录成功');
                    const userInfo = response.data;
                    console.log('登录响应数据：', userInfo);
                    
                    if (!userInfo || !userInfo.token) {
                        console.error('登录响应中没有找到 token');
                        ElMessage.error('登录信息不完整，请重试');
                        return;
                    }
                    
                    // 存储 token 到 sessionStorage 和 localStorage
                    console.log('准备存储的 token:', userInfo.token);
                    sessionStorage.setItem('token', userInfo.token);
                    localStorage.setItem('token', userInfo.token);
                    
                    // 存储用户信息到 store 和 storage
                    const userInfoToStore = {
                        username: userInfo.username,
                        realName: userInfo.realName,
                        role: userInfo.role,
                        schoolNumber: userInfo.schoolNumber,
                        token: userInfo.token,
                        createTime: userInfo.createTime,
                        email: userInfo.email,
                        classId: userInfo.classId,
                        status: userInfo.status
                    };
                    
                    userStore.setUserInfo(userInfoToStore);
                    sessionStorage.setItem('userInfo', JSON.stringify(userInfoToStore));
                    localStorage.setItem('userInfo', JSON.stringify(userInfoToStore));
                    
                    console.log('存储后的用户信息:', {
                        sessionStorage: JSON.parse(sessionStorage.getItem('userInfo')),
                        localStorage: JSON.parse(localStorage.getItem('userInfo')),
                        token: {
                            session: sessionStorage.getItem('token'),
                            local: localStorage.getItem('token')
                        }
                    });
                    
                    // 根据角色跳转到不同页面
                    if (userInfo.role === 'student') {
                        router.push('/student/exam-list');
                    } else if (userInfo.role === 'teacher') {
                        router.push('/main');
                    } else {
                        ElMessage.warning('未知的用户角色');
                        router.push('/login');
                    }
                } else {
                    ElMessage.error(response.message || '登录失败');
                    refreshVerifyCode();
                }
            } catch (error) {
                console.error('登录错误：', error);
                if (!error.response) {
                    ElMessage.error('登录失败，请重试');
                }
                refreshVerifyCode();
            }
        }
    });
};

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
    ],
    verifyCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
});

const rememberStatus = (status) => {
    remember.value = status;
    if (status) {
        sessionStorage.setItem('loginForm', JSON.stringify({
            ...loginForm,
            status: remember.value
        }));
    } else {
        sessionStorage.removeItem('loginForm');
    }
};

const themeStore = useTheme();
const isNightMode = computed(() => themeStore.isNightMode);

const toggleTheme = () => {
    themeStore.toggleTheme();
};

onMounted(() => {
    themeStore.initTheme();
});

// 重置密码相关
const resetPasswordVisible = ref(false);
const resetPasswordFormRef = ref();
const resetPasswordForm = reactive({
    username: '',
    password: '',
    confirmPassword: '',
    school_number: '',
    verifyCode: '',
    verifyCodeKey: ''
});

const refreshResetVerifyCode = () => {
    if (resetVerifyCodeRef.value) {
        resetVerifyCodeRef.value.handleClick();
    }
};

const resetPasswordRules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' },
        { 
            validator: (rule, value, callback) => {
                if (value !== resetPasswordForm.password) {
                    callback(new Error('两次输入的密码不一致'));
                } else {
                    callback();
                }
            }, 
            trigger: 'blur' 
        }
    ],
    school_number: [
        { required: true, message: '请输入学号', trigger: 'blur' }
    ],
    verifyCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' }
    ]
});

const openResetPasswordDialog = () => {
    resetPasswordVisible.value = true;
    resetPasswordForm.username = '';
    resetPasswordForm.password = '';
    resetPasswordForm.confirmPassword = '';
    resetPasswordForm.school_number = '';
    resetPasswordForm.verifyCode = '';
    // 重新获取验证码
    if (resetVerifyCodeRef.value) {
        resetVerifyCodeRef.value.handleClick();
    }
};

const submitResetPassword = async (formEl) => {
    if (!formEl) return;
    await formEl.validate(async (valid) => {
        if (valid) {
            try {
                // 使用相同的RSA加密函数对新密码进行加密
                const encryptedPassword = await encryptPassword(resetPasswordForm.password);
                const response = await request.post('/nerv/test', {
                    username: resetPasswordForm.username,
                    password: encryptedPassword,
                    school_number: resetPasswordForm.school_number,
                    verifyCode: resetPasswordForm.verifyCode,
                    verifyCodeKey: resetPasswordForm.verifyCodeKey
                });

                if (response.data.code === 200) {
                    ElMessage.success(response.data.message || '密码重置成功');
                    resetPasswordVisible.value = false;
                } else {
                    ElMessage.error(response.data.message || '密码重置失败');
                    refreshResetVerifyCode();
                }
            } catch (error) {
                console.error('密码重置错误：', error);
                ElMessage.error('密码重置失败，请重试');
                refreshResetVerifyCode();
            }
        }
    });
};
</script>

<style scoped>
.login-wrap {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(
        45deg,
        #FF6B6B,
        #4ECDC4,
        #45B7D1,
        #A06CD5,
        #F7D794,
        #FF9A9E,
        #FAD0C4,
        #6991C7
    );
    background-size: 400% 400%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    animation: gradientBG 15s ease infinite;
    overflow: hidden;
    transition: all 0.8s ease;
}

.login-wrap.night-mode {
    background: linear-gradient(
        45deg,
        #0f2027,
        #203a43,
        #2c5364,
        #243b55,
        #141e30
    );
    background-size: 500% 500%;
}

/* 气泡容器 */
.bubbles {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    top: 0;
    left: 0;
}

/* 气泡样式 */
.bubble {
    position: absolute;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.4)
    );
    backdrop-filter: blur(5px);
    border-radius: 50%;
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.6),
        0 0 30px rgba(255, 255, 255, 0.4);
    animation: float 8s infinite;
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* 随机气泡大小和位置 */
.bubble:nth-child(3n) { width: 40px; height: 40px; left: 10%; animation-delay: 0s; }
.bubble:nth-child(3n+1) { width: 60px; height: 60px; left: 20%; animation-delay: 2s; }
.bubble:nth-child(3n+2) { width: 50px; height: 50px; left: 30%; animation-delay: 4s; }
.bubble:nth-child(4n) { width: 55px; height: 55px; left: 40%; animation-delay: 1s; }
.bubble:nth-child(4n+1) { width: 45px; height: 45px; left: 50%; animation-delay: 3s; }
.bubble:nth-child(4n+2) { width: 65px; height: 65px; left: 60%; animation-delay: 5s; }
.bubble:nth-child(4n+3) { width: 35px; height: 35px; left: 70%; animation-delay: 0.5s; }
.bubble:nth-child(5n) { width: 70px; height: 70px; left: 80%; animation-delay: 2.5s; }
.bubble:nth-child(5n+1) { width: 55px; height: 55px; left: 90%; animation-delay: 4.5s; }

/* 浮动形状 */
.floating-shapes {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.shape {
    position: absolute;
    background: linear-gradient(45deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2));
    backdrop-filter: blur(8px);
    animation: floatShape 20s infinite;
    box-shadow: 0 0 40px rgba(255,255,255,0.3);
}

.shape.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    left: 15%;
    top: 20%;
}

.shape.square {
    width: 80px;
    height: 80px;
    right: 15%;
    top: 30%;
    animation-delay: 5s;
}

.shape.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 86.6px solid rgba(255,255,255,0.1);
    background: none;
    left: 50%;
    top: 70%;
    animation-delay: 10s;
}

@keyframes float {
    0% {
        transform: translateY(120vh) translateX(-20px) rotate(0);
        opacity: 0.8;
    }
    20% {
        transform: translateY(80vh) translateX(20px) rotate(90deg);
        opacity: 0.9;
    }
    40% {
        transform: translateY(60vh) translateX(-20px) rotate(180deg);
        opacity: 1;
    }
    60% {
        transform: translateY(40vh) translateX(20px) rotate(270deg);
        opacity: 0.9;
    }
    80% {
        transform: translateY(20vh) translateX(-20px) rotate(360deg);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-50px) translateX(0) rotate(720deg);
        opacity: 0;
    }
}

@keyframes floatShape {
    0% {
        transform: translate(0, 0) rotate(0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(50px, -30px) rotate(90deg) scale(1.2);
        opacity: 0.5;
    }
    50% {
        transform: translate(100px, 0) rotate(180deg) scale(0.8);
        opacity: 0.7;
    }
    75% {
        transform: translate(50px, 30px) rotate(270deg) scale(1.1);
        opacity: 0.5;
    }
    100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
        opacity: 0.3;
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 150%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 夜间模式调整 */
.night-mode .bubble {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0.1)
    );
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.2),
        0 0 30px rgba(255, 255, 255, 0.1);
}

.night-mode .shape {
    opacity: 0.1;
}

.login-container {
    width: 400px;
    padding: 40px 45px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 0 100px rgba(255, 255, 255, 0.3);
    position: relative;
    transition: all 0.8s ease;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 3;
    animation: containerFloat 6s ease-in-out infinite;
}

.night-mode .login-container {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.center {
    text-align: center;
    font-size: 30px;
    margin-bottom: 35px;
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #A06CD5);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    letter-spacing: 3px;
    animation: titleGradient 6s ease infinite;
    transition: all 0.8s ease;
}

.night-mode .center {
    background: linear-gradient(45deg, #fff, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.theme-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    cursor: pointer;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.night-mode .theme-toggle {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* 输入框基础样式 */
.el-input {
    --el-input-bg-color: transparent !important;
    --el-input-border-color: transparent !important;
    --el-input-hover-border-color: transparent !important;
    --el-input-focus-border-color: transparent !important;
    height: 42px;
}

:deep(.el-input__wrapper) {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    padding: 0 15px;
}

/* 覆盖所有状态下的样式 */
:deep(.el-input__wrapper),
:deep(.el-input__wrapper.is-focus),
:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper:active),
:deep(.el-input__wrapper.is-active) {
    box-shadow: none !important;
    background-color: transparent !important;
}

:deep(.el-input__wrapper:hover) {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5);
}

:deep(.el-input__wrapper.is-focus) {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.6);
}

/* 输入框内部元素样式 */
:deep(.el-input__inner) {
    color: #2c3e50;
    font-weight: 500;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-text-fill-color: #2c3e50 !important;
    border: none !important;
}

:deep(.el-input__inner::placeholder) {
    color: rgba(44, 62, 80, 0.6);
    -webkit-text-fill-color: rgba(44, 62, 80, 0.6) !important;
}

/* 确保输入框所有部分都是透明的 */
:deep(.el-input__wrapper > *) {
    background-color: transparent !important;
}

/* 图标样式 */
.input-icon {
    font-size: 18px;
    color: rgba(44, 62, 80, 0.7);
}

/* 夜间模式输入框样式 */
.night-mode :deep(.el-input__wrapper) {
    background: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

.night-mode :deep(.el-input__wrapper:hover) {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.2);
}

.night-mode :deep(.el-input__wrapper.is-focus) {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.3);
}

.night-mode :deep(.el-input__inner) {
    color: #e0e0e0;
    -webkit-text-fill-color: #e0e0e0 !important;
    background: transparent !important;
}

.night-mode :deep(.el-input__inner::placeholder) {
    color: rgba(255, 255, 255, 0.5);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.5) !important;
}

.night-mode .input-icon {
    color: rgba(255, 255, 255, 0.7);
}

/* 移除所有可能的背景和阴影 */
:deep(.el-input .el-input__wrapper),
:deep(.el-input.is-focus .el-input__wrapper),
:deep(.el-input .el-input__wrapper.is-focus),
:deep(.el-input__wrapper),
:deep(.el-input__wrapper.is-focus),
:deep(.el-input__wrapper:hover),
:deep(.el-input__wrapper:active) {
    box-shadow: none !important;
    background-image: none !important;
}

/* 确保密码输入框的图标区域也是透明的 */
:deep(.el-input__suffix),
:deep(.el-input__prefix) {
    background: transparent !important;
}

/* 移除任何可能的默认背景色 */
:deep(.el-input__wrapper),
:deep(.el-input__wrapper *) {
    background-color: transparent !important;
}

.code-img {
    width: 28%;
    height: 42px;
    margin-left: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

/* 美化表单操作区域 */
.form-actions {
    display: flex;
    flex-direction: column;
    margin-top: 24px;
}

/* 调整用户选项布局 */
.user-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 0 8px;
}

.left-option, .right-option {
    display: flex;
    align-items: center;
}

/* 美化记住密码选项 */
.remember {
    color: #606266;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* 美化注册链接 */
.link-div {
    color: #4ECDC4;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    padding: 3px 1px;
    letter-spacing: 0.5px;
}

.link-div:hover {
    color: #45B7D1;
}

.link-div::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, #4ECDC4, #45B7D1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.link-div:hover::after {
    transform: scaleX(1);
}

/* 按钮组样式 */
.button-group {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.reset-btn, .login-btn {
    flex: 1;
    height: 44px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin: 0 !important;
    letter-spacing: 4px;
}

.reset-btn {
    background: linear-gradient(45deg, #7F7FD5, #86A8E7);
    border: none;
}

.login-btn {
    background: linear-gradient(45deg, #4ECDC4, #45B7D1);
    border: none;
}

:deep(.el-button:hover) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0.95;
}

@keyframes containerFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-10px) translateX(5px);
    }
}

@keyframes titleGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* 恢复被删除的必要样式 */
:deep(.el-button) {
    color: white;
    position: relative;
    overflow: hidden;
}

:deep(.el-button::before) {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: 0.5s;
}

:deep(.el-button:hover::before) {
    left: 100%;
}

:deep(.el-form-item__error) {
    color: #f56c6c;
    font-size: 12px;
    margin-top: 4px;
}

/* 夜间模式下的按钮样式 */
.night-mode .reset-btn {
    background: linear-gradient(45deg, #414345, #232526);
}

.night-mode .login-btn {
    background: linear-gradient(45deg, #203a43, #2c5364);
}

.night-mode .remember {
    color: #e0e0e0;
}

.night-mode .link-div {
    color: #45B7D1;
}

/* 微调按钮动画 */
.reset-btn:hover, .login-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15) !important;
}

.reset-btn:active, .login-btn:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 重置密码链接样式 */
.reset-password-link {
    color: #4ECDC4;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    position: relative;
    padding: 3px 1px;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.reset-password-link:hover {
    color: #45B7D1;
}

.reset-password-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background: linear-gradient(90deg, #4ECDC4, #45B7D1);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.reset-password-link:hover::after {
    transform: scaleX(1);
}

/* 对话框样式 */
:deep(.el-dialog) {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
}

:deep(.el-dialog__header) {
    padding: 20px 20px 10px;
    text-align: center;
    font-weight: bold;
}

:deep(.el-dialog__title) {
    font-size: 20px;
    color: #2c3e50;
    letter-spacing: 1px;
}

:deep(.el-dialog__body) {
    padding: 20px 30px;
}

:deep(.el-dialog__footer) {
    padding: 10px 20px 20px;
    text-align: center;
}

.dialog-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.dialog-footer .el-button {
    min-width: 100px;
    border-radius: 8px;
}

.night-mode :deep(.el-dialog) {
    background: rgba(30, 30, 30, 0.9);
}

.night-mode :deep(.el-dialog__title) {
    color: #e0e0e0;
}

.night-mode .reset-password-link {
    color: #45B7D1;
}
</style>